<template>
  <article>
    <div class="blogs">
      <li v-for="(item,index) in articles" :key="index">
        <span class="blogpic">
          <router-link :to="{name:'_detail',query:{articleId:item.id}}">
            <img src="/static/images/text02.jpg" />
          </router-link>
        </span>
        <h3 class="blogtitle">
          <router-link :to="{name:'_detail',query:{articleId:item.id}}">{{item.title}}</router-link>
        </h3>
        <div class="bloginfo">
          <p>{{item.brief}}...</p>
        </div>
        <div class="autor">
          <span class="lm">
            <a
              target="_blank"
              class="classname"
              @click="toTagList(item.tags1)"
            >{{item.tag.tagsName}}</a>
          </span>
          <span class="dtime">{{item.publishDate}}</span>
          <span class="viewnum">
            浏览（
            <router-link to="/">
              <a>{{item.views}}</a>
            </router-link>)
          </span>
          <span class="readmore">
            <router-link :to="{name:'_detail',query:{articleId:item.id}}">阅读原文</router-link>
          </span>
        </div>
      </li>
      <!-- 分页 -->
      <el-pagination
        layout="prev, pager, next"
        :hide-on-single-page="singePage"
        @current-change="currentChange"
        :total="total"
      ></el-pagination>
    </div>

    <Sidebar />
  </article>
</template>

<script>
import Sidebar from "./sidebar";
import { formatDate } from "@/utils/tools";
export default {
  data() {
    return {
      articles: [
        {
          views: "0",
          tags1: "CSS3",
          tags2: "Html5",
          publishDate: formatDate(new Date(), "yyyy-MM-dd"),
          tag: {
            tagsName: ""
          }
        }
      ],
      total: 100,
      singePage: false // 是否只有一页
    };
  },
  components: {
    Sidebar
  },
  created() {
    // 显示头部组件
    this.$store.commit("increment", true);
    this.nodes = this.getArticles();
  },
  methods: {
    getArticles() {
      this.$http({
        url: this.$http.adornUrl("/api/article/list"),
        method: "GET",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.articles = data.data.content;
          this.total = parseInt(data.data.totalElements);
          if (data.data.totalPages === 1) {
            this.singePage = true;
          }
        }
      });
    },
    toTagList(val) {
      this.$router.push({ name: "_list", query: { tagId: val } });
    },
    currentChange(val) {
      console.log("val2->", val);
    }
  }
};
</script>
<style lang="scss">

.el-pagination {
  text-align: center;
}
.el-pager li,
.el-pagination .btn-next,
.el-pagination .btn-prev {
  background: inherit;
}
.el-pagination button:disabled {
  background-color: inherit;
}
.classname{
  cursor:pointer;
}
</style>

